---
title: 편집기 설정
description: Astro로 구축하기 위한 편집기 설정
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astro 개발자 경험을 개선하고 새로운 기능을 사용하려면 코드 편집기를 사용자 정의하세요.

## VS Code

[VS Code](https://code.visualstudio.com/)는 Microsoft에서 만든, 웹 개발자를 위한 인기 있는 코드 편집기입니다. 또한 VS Code 엔진은 [GitHub Codespaces](https://github.com/features/codespaces) 및 [Gitpod](https://gitpod.io/)과 같이 인기 있는 브라우저 내 코드 편집기를 지원합니다.

Astro는 모든 코드 편집기에서 작동합니다. 그러나 Astro 프로젝트에는 VS Code 사용을 권장합니다. 우리는 Astro 프로젝트의 개발자 경험을 개선하고 몇 가지 주요 기능을 제공하는 공식 [Astro VS Code 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 지속적으로 관리하고 있습니다.

- `.astro` 파일의 구문 강조 제공
- `.astro` 파일의 TypeScript 타입 정보 제공
- 코드 자동 완성, 힌트 등을 위한 [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense)

시작하려면 지금 [Astro VS Code 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 설치하세요.

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>Astro 프로젝트에서 [TypeScript 설정](/ko/guides/typescript/)하는 방법을 알아보세요.</ReadMore>

## JetBrains IDEs

Astro에 대한 초기 지원은 WebStorm 2023.1에서 시작되었습니다. [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) 또는 IDE의 Plugins 탭에서 "Astro"를 검색하여 공식 플러그인을 설치할 수 있습니다. 이 플러그인은 구문 강조, 코드 자동 완성, 포맷팅과 같은 기능을 포함하고 있으며 앞으로 더 많은 고급 기능을 추가할 계획입니다. 또한, [JavaScript를 지원하는 다른 모든 JetBrains IDE](https://www.jetbrains.com/products/#lang=js&type=ide)에서도 사용할 수 있습니다.

## 다른 코드 편집기

우리의 놀라운 커뮤니티는 다음을 포함하여 인기있는 다른 편집기를 위한 여러 확장 기능을 유지합니다.

- [Open VSX의 VS Code 확장](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent"> 공식</Badge></span> - [VSCodium](https://vscodium.com/)과 같은 개방형 플랫폼용 Open VSX 레지스트리에서 사용할 수 있는 공식 Astro VS Code 확장입니다.
- [Nova 확장](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">커뮤니티</Badge></span> - Nova에서 Astro에 대한 구문 강조 및 코드 자동 완성 기능을 제공합니다.
- [Vim 플러그인](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">커뮤니티</Badge></span> - Vim 또는 Neovim에서 Astro에 대한 구문 강조, 들여쓰기, 코드 접기 지원을 제공합니다.
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro)와 [TreeSitter](https://github.com/virchau13/tree-sitter-astro) 플러그인 <span style="margin: 0.25em;"><Badge variant="neutral">커뮤니티</Badge></span> - Neovim에서 Astro에 대한 구문 강조, treesitter 분석, 코드 자동 완성 기능을 제공합니다.
- Emacs - Astro를 이용해 작업하기 위해 [Emacs 및 Eglot 구성](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span>을 참조하세요.
- [Sublime Text의 Astro 구문 강조](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Sublime Text 패키지 관리자에서 사용할 수 있는 Sublime Text용 Astro 패키지입니다.

## 브라우저 내 편집기

로컬 편집기 외에도 Astro는 다음을 포함하여 브라우저 내 편집기에서도 잘 동작합니다.

- [StackBlitz](https://stackblitz.com/) 및 [CodeSandbox](https://codesandbox.io/) - 브라우저에서 실행되는 온라인 편집기로, `.astro` 파일에 대한 구문 강조 기능이 기본으로 지원됩니다. 설치나 구성이 필요하지 않습니다!
- [GitHub.dev](https://github.dev/) - Astro VS Code 확장을 [웹 확장](https://code.visualstudio.com/api/extension-guides/web-extensions)으로 설치할 수 있으며, 이를 통해 전체 확장 기능 중 일부만 사용할 수 있습니다. 현재는 구문 강조만 지원됩니다.
- [Gitpod](https://gitpod.io/) - Open VSX의 공식 Astro VS Code 확장을 설치할 수 있는 클라우드의 완전한 개발 환경입니다.

## 기타 도구

### ESLint

[ESLint](https://eslint.org/)는 JavaScript 및 JSX용으로 널리 사용되는 린터입니다. [커뮤니티에서 관리하는 플러그인](https://github.com/ota-meshi/eslint-plugin-astro)을 설치하여 Astro 지원을 추가할 수 있습니다.

프로젝트에 ESLint를 설치하고 설정하는 방법에 대한 자세한 내용은 [프로젝트 사용자 가이드](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/)를 참조하세요.

### Stylelint

[Stylelint](https://stylelint.io/)는 인기 있는 CSS용 린터입니다. [커뮤니티에서 관리하는 Stylelint 구성](https://github.com/ota-meshi/stylelint-config-html)은 Astro 지원을 제공합니다.

설치 방법, 편집기 통합, 추가 정보는 프로젝트의 README에서 확인할 수 있습니다.

### Prettier

[Prettier](https://prettier.io/)는 JavaScript, HTML, CSS 등에 널리 사용되는 포맷터입니다. [Astro VS Code 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) 또는 [다른 편집기의 Astro 언어 서버](#다른-코드-편집기)를 사용하는 경우, Prettier를 사용한 코드 포맷팅이 이미 포함되어 있습니다.

편집기 외부(예: CLI) 또는 우리의 도구를 지원하지 않는 편집기에서 `.astro` 파일에 대한 포맷팅 지원을 추가하려면 [공식 Astro Prettier 플러그인](https://github.com/withastro/prettier-plugin-astro)을 설치하세요.

시작하려면 먼저 Prettier와 플러그인을 설치하세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

그러면 Prettier는 플러그인을 자동으로 감지합니다. 감지된 플러그인은 다음 명령을 실행할 때 `.astro` 파일을 처리하는 데 사용됩니다.

```shell
prettier --write .
```

지원하는 옵션, VS Code에서 Prettier를 설정하는 방법 등에 대한 자세한 내용은 [Prettier 플러그인 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md)를 확인하세요.
